<template>
  <!--<panel title="PM2.5各项数据">
    <div class="mr20 ml20">
      <x-row v-if="show">
        <x-col :span="24">
          <pie :width="chartWidth" :height="chartHeight" :options="chartOptions"></pie>
        </x-col>
      </x-row>
    </div>
  </panel>-->
  <panel title="今日空气质量统计">
    <span slot="title-extra"></span>
    <div class="middle-area">
      <x-row class="text-content text-content-top">
        <x-col :span="item.span" v-for="item in info">
          <text-box
            title-place="bottom"
            :title="item.title"
            :value="item.value"
            :unit="item.unit"
            :type="item.type"
            number-font-size="22px">
          </text-box>
        </x-col>
      </x-row>
      <x-row class="text-content text-content-bottom">
        <x-col :span="item.span" v-for="item in info2">
          <text-box
            title-place="bottom"
            :title="item.title"
            :value="item.value"
            :unit="item.unit"
            :type="item.type"
            number-font-size="22px">
          </text-box>
        </x-col>
      </x-row>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'PM',
  data () {
    return {
      chartWidth: '100px',
      chartHeight: '100px',
      chartOptions: null,
      show: false,
      reading: 16 // 读数
    }
  },
  computed: {
    pm25 () {
      if (!this.$store.getters.pm25) {
        return
      }
      let obj = {}
      let res = _.clone(this.$store.getters.pm25)
      // 做一个天气质量的对应关系
      let oj = {
        '1': '很好',
        '2': '好',
        '3': '中',
        '4': '差',
        '5': '很差'
      }
      let color = {
        '1': 'green',
        '2': 'blue',
        '3': 'orange',
        '4': 'danger',
        '5': 'brownRed'
      }
      obj['pm25'] = res.data['0']
      obj['tvoc'] = res.data['1']
      obj['formaldehyde'] = res.data['2']
      obj['temperature'] = res.data['3']
      obj['humidity'] = res.data['4']
      for (let i in oj) {
        if (parseInt(i) === res.data['5']) {
          obj['airQuality'] = oj[i]
        }
      }
      for (let i in color) {
        if (parseInt(i) === res.data['5']) {
          obj['color'] = color[i]
        }
      }
      return obj
    },
    info () {
      let res
      if (!this.pm25) {
        res = {
          airQuality: '',
          temperature: 0,
          humidity: 0
        }
      } else {
        res = this.pm25
      }
      return [{
        title: '空气质量',
        unit: res.airQuality,
        span: 8,
        type: res.color
      }, {
        title: '温度',
        value: res.temperature,
        unit: '℃',
        span: 8
      }, {
        title: '湿度',
        value: res.humidity,
        unit: '％',
        span: 8
      }]
    },
    info2 () {
      let res
      if (!this.pm25) {
        res = {
          pm25: 0,
          tvoc: 0,
          formaldehyde: 0
        }
      } else {
        res = _.clone(this.pm25)
      }
      return [{
        title: 'PM2.5',
        value: res.pm25,
        unit: 'ug/m³',
        span: 8
      }, {
        title: 'TVOC',
        value: res.tvoc,
        unit: 'mg/m³',
        span: 8
      }, {
        title: '甲醛',
        value: res.formaldehyde,
        unit: 'ug/m³',
        span: 8
      }]
    }
  },
  mounted () {
    setTimeout(this.initialize, 400)
    // 获取空气质量检测仪数据
    this.requestRestfulData()
  },

  methods: {
    initialize () {
      this.chartWidth = `${this.$el.clientWidth - 40}px`
      this.chartHeight = `${this.$el.clientHeight - 31}px`
      this.show = true
    },
    requestRestfulData () {
      this.$store.dispatch('updatePM25')
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../../../assets/stylus/base'
.middle-area
  margin-top 10%
  font-size normal
  .text-content-top
    padding-bottom: 5.7%;
    width inherit
    font-weight 100
    margin 0 20px
    border-bottom 1px dashed #eee
  .text-content-bottom
    padding-top 6.3%
    width inherit
    font-weight 100
    margin 0 20px
</style>